<!--
    使用 v-on 指令为元素绑定事件
    语法：     v-on:event="function"

    使用 @keyup(v-on:keyup.keyCode) 指令监听键盘
    语法：     @keyup(v-on:keyup.keyCode)="function"
-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件处理器</title>
    <script src="js/vue.js"></script>
    <style>
        div{
            border: 1px dotted #e6e6e6;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>

<div id="ex1">
    <button v-on:click="count   +=   1">增加 1 </button>
    <p>这个按钮被点击了 {{ count }} 次</p>
</div>

<div id="ex2">
    <button v-on:click="hello">Hello</button>
</div>

<div id="ex3">
    <button v-on:click="say('hi')">HI</button>
    <button v-on:click="say('hello')">HELLO</button>
</div>

<div id="ex4">
    <p>键盘监听</p>
    <input @keyup="say" placeholder="键盘监听">
</div>
<script>
    var ex1 =   new Vue({
        el:"#ex1",
        data:{
            count:0
        }
    });

    var ex2 =   new Vue({
        el:"#ex2",
        data:{
            name:'Vue,js'
        },
        methods:{
            hello:function (e){
                alert('Hello '+this.name+'!');
                alert('element tagName:'+e.target.tagName);
            }
        }
    });

    var ex3 =   new Vue({
        el:"#ex3",
        methods:{
            say:function(message){
                alert(message);
            }
        }
    });

    var ex4 =   new Vue({
        el:"#ex4",
        methods:{
            say:function(e){
                if(e.keyCode    ==  13)     alert("按下回车键");
                else if(e.keyCode   ==  32)     alert("按下空格键");
                else if(e.keyCode   ==  46)     alert("按下退格键");
                else alert("按下的键码："+e.keyCode);
            }
        }
    });
</script>
</body>
</html>